<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title>APP</title>
		<link rel="stylesheet" type="text/css" href="../css/api.css" />
		<link rel="stylesheet" type="text/css" href="../css/common.css" />
		<style>
			#con {
				margin: 10px;
				font-size: 28px;
			}
			ul {
				margin-bottom: 10px;
			}
			.txt {
				margin: 5px 10px;
				padding: 5px;
				color: #000;
				word-wrap: break-word;
			}
			* {
				margin: 0;
				padding: 0;
				border-width: 0;
			}
			body {
				text-align: center;
				background-color: black;
			}
			/*canvas {
			 background-color: black;
			 position: absolute;
			 }*/
			canvas {
				left: 0;
				top: 0;
				margin: 0;
				width: 350px;
				height: 400px;
				position: absolute;
				background-color: black;
				border: 1px solid #ddd;
			}
			.spirit {
				position: absolute;
				width: 5px;
				height: 5px;
				background-color: red;
			}
			.homeFooter {
				position: fixed;
				bottom: 0;
				height: 45px;
				width: 100%;
				box-sizing: border-box;
				display: block;
				background-color: #fff;
			}
			.homeFooter > nav, .homeFooter > nav > ul {
				height: 100%;
			}
			.homeFooter > nav > ul {
				-webkit-box-orient: horizontal;
				padding: 5px;
				border-top: 1px solid #ddd;
				white-space: nowrap;
				text-align: center;
				list-style-type: none;
			}
			.homeFooter > nav > ul > li {
				display: block;
				float: left;
				width: 32%;
				padding: 2px;
			}
			.homeFooter > nav > ul > li > span:active {
				color: rgba(0,135,233,1);
				height: 30px;
				line-height: 30px;
				font-size: 1.0em;
				font-weight: 600;
			}
			.homeFooter > nav > ul > li > span {
				color: rgba(99,194,233,1);
				height: 30px;
				line-height: 30px;
				font-size: 1.0em;
				font-weight: 600;
			}
			.homeFooter > nav > ul > li > h2 {
				font-size: 1.0em;
				font-weight: 600;
				color: rgba(99,194,233,1);
			}
		</style>
	</head>
	<body>
		<canvas id='contain'></canvas>
		<footer class="homeFooter">
			<nav>
				<ul>
					<li id="activeId" tapmode=""  onclick="api.closeWin()">
						<span class="am-icon-sm6  am-icon-back">返回</span>
					</li>
					<li onclick="Clear()" tapmode="">
						<span class="am-icon-sm6  am-icon-cut">清除</span>
					</li>
					<li tapmode="" onclick="Save()">
						<span class="am-icon-sm6  am-icon-picture-o" >保存</span>
					</li>
				</ul>
			</nav>
		</footer>
	</body>
	<script type="text/javascript" src="../script/api.js"></script>
	<!--<script type="text/javascript" src="../script/touch.js"></script>
	<script type="text/javascript" src="../script/picture.js"></script>-->
	<script type="text/javascript">
		//"use strict";
		var Sign = function(id, width, height, options) {
			this.id = id;
			this.width = width;
			this.height = height;
			this.px = [];
			this.py = [];
			this.pp = [];
			this.pt = [];
			this.px.push(0);
			this.py.push(0);
			this.pp.push(0);
			this.pt.push(0);
			
			this.startX=0;
			this.startY=0;
			this.count=0;
			this.canvas=null;
			this.ts=new Date();
		}
		Sign.prototype = {
			constructor : Sign,
			ctx : null,
			data:{px:[],py:[],pp:[],pt:[]},
			count:0,
			ts:new Date(),
			init : function() {
				//conlog
				var canvas = document.getElementById(this.id);
				canvas.width=this.width;
				canvas.height=this.height;				
				this.ctx = canvas.getContext("2d");
				//this.width = width;
				//this.height = height;
				this.data.px = [];
				this.data.py = [];
				this.data.pp = [];
				this.data.pt = [];
				
				this.data.px.push(0);
				
				this.px = [];
				this.py = [];
				this.pp = [];
				this.pt = [];
				
				//this.startX=0;
				//this.startY=0;
				this.count=0;
				this.ts=new Date();
				canvas.addEventListener("touchstart", this.touchStart, false);	
				canvas.addEventListener("touchmove", this.touchMove, false);
				canvas.addEventListener("touchend", this.touchEnd, false);
				return this;		
			},			
			clear : function() {
				//var canvas=this.canvas;
				//canvas.removeEventListener("touchstart", touchStart, false);	
				//canvas.removeEventListener("touchmove", touchMove, false);
				//canvas.removeEventListener("touchend", touchEnd, false);
				//return;
				var ctx = this.ctx, w = this.width, h = this.height;
				ctx.clearRect(0,0,w,h);
				this.data.px = [];
				this.data.py = [];
				this.data.pp = [];
				this.data.pt = [];
				//this.startX=0;
				//this.startY=0;
				this.count=0;
				
			},
			drawGrid : function(options) {
				var option = options || {
					x : 20,
					y : 20,
					color : '#eee'
				};
				var ctx = this.ctx, w = this.width, h = this.height, color = option.color, gridx = option.x, gridy = option.y;
				ctx.strokeStyle = color;
				ctx.lineJoin = "round";
				ctx.lineWidth = 1;
				ctx.beginPath();
				for (var i = 1; i <= parseInt(h / gridx); i++) {
					ctx.moveTo(0, gridy * i);
					ctx.lineTo(w, gridy * i);
				}
				for (var i = 1; i <= parseInt(w / gridx); i++) {
					ctx.moveTo(gridx * i, 0);
					ctx.lineTo(gridy * i, h);
				}
				ctx.closePath();
				ctx.stroke();
				//console.log(JSON.stringify(option));
				//console.log(gridx);
				//console.log(gridy);
			},
			touchStart:	function(event) {
				event.preventDefault();				
				var count=this.count||0;
				//console.log(count);
				if(count==0)
					ts=new Date();
				if (! event.touches.length) return;
				var touch = event.touches[0];
				var startX = touch.pageX;
				var startY = touch.pageY;
				//this.px.push(startX);			   
				var px=[];
				px.push(startX);
				this.data.px.push(startX);
				this.data.py.push(startY);
				this.data.pp.push(1);
				this.data.pt.push(0);
				this.count++;
				console.log(startX.toFixed(2)+','+startY.toFixed(2));
			},
			touchMove:function (event){
			    event.preventDefault();
				if (! event.touches.length) return;
				var touch = event.touches[0];
				//var x= touch.pageX-startX;
				//var y = touch.pageY-startY;
				var tm=new Date();
				var count=this.count;
				if(count==0)
				{
					ts=tm;
					ctx.beginPath();
					ctx.moveTo(touch.pageX, touch.pageY);
				}
				else
				{
					var oldx=this.px[this.px.length-1];
					var oldy=this.py[this.py.length-1];
					var oldp=this.pp[this.pp.length-1];
					if(oldp!=0)
					{
					ctx.beginPath();
					ctx.moveTo(oldx,oldy);
					ctx.lineTo(touch.pageX, touch.pageY );
					ctx.closePath();
					}
					ctx.stroke();
					ctx.restore();
					ctx.fillStyle = "#8f4b26";
					ctx.beginPath();
					ctx.arc(touch.pageX, touch.pageY ,2,0,2*Math.PI);
					ctx.closePath();
					ctx.fill();
				};
				var tt=tm.getTime()-ts.getTime();
				this.data.px.push(touch.pageX);
				this.data.py.push(touch.pageY);
				this.data.pp.push(1);
				this.data.pt.push(tt);
				this.count++;				
				this.log(touch,tt);
			},
			touchEnd:function (event) {
				var tm=new Date();
				if(this.count==0)
					ts=tm;
				var tt=tm.getTime()-ts.getTime();
				//alert()
				if(this.px.length<=0)
					return;
				var x=this.data.px[this.data.px.length-1];
				var y=this.data.py[this.data.py.length-1];
				this.data.px.push(x);
				this.data.py.push(y);
				this.data.pp.push(0);
				this.data.pt.push(tt);
				console.log("结束:"+count+",当前offx值为:" + parseInt(x*100)/100.0 + ", 当前offy值为:" +parseInt(y*100)/100.0  + ","+tt);
			},
			log:function(touch,tt)
			{
				console.log("No."+count+",当前offx值为:" +parseInt(touch.pageX) + ", 当前offy值为:" + parseInt(touch.pageY)  + ","+tt);
				console.log("No."+count+",当前offx值为:" +parseInt(touch.clientX) + ", 当前offy值为:" + parseInt(touch.clientY)  + ","+tt);
				console.log("No."+count+",当前offx值为:" +parseInt(touch.screenX) + ", 当前offy值为:" + parseInt(touch.screenY)  + ","+tt);
			},
			toString:function()
			{
				var px=this.data.px;
				var py=this.data.py;
				var pp=this.data.pp;
				var pt=this.data.pt;
				var str="";
				for(var i=0;i<px.length;i++)
				{
				str+=px[i].toFixed(2)+','+py[i].toFixed(2)+','+pp[i]+','+pt[i]+"\r\n";
				}
				return str;		
			}
		}
		var	sig = null;
		
		function Clear(){
			sig.clear();
			sig.init().drawGrid();
		}

		function Save(){
			console.log(sig.tostring());
			alert(sig.tostring());		
		}
		
				
		apiready = function() {
			sig=new Sign("contain",360,400);
			sig.init().drawGrid();
			//contain.width=winW;
			//contain.height=winH-50;
		};
	</script>
</html>